<template>
    <div class="car">
        <van-checkbox v-model="item.checked" @click="singlecheckedFn(item.checked, item.product_id)"
            v-for="item in cartlistArr" :key="item.id">
            <van-swipe-cell>
                <van-card :num="item.number" :price="item.retail_price" desc="描述信息" :title="item.goods_name"
                    :thumb="item.list_pic_url" />
                <template #right>
                    <van-button square text="删除" @click="delFn(item.product_id.toString())" type="danger"
                        class="delete-button" />
                </template>
            </van-swipe-cell>
        </van-checkbox>

        <!-- 提交栏 -->
        <van-submit-bar :price="totalprice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkedAll" @click="checkallFn">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
// 引入购物车接口
import { getcartlistdata, setcheckedproduct, delcartapi } from '@/api/car';
// 引入数据接口类型
import type { Icartlistitem } from '@/types/cat'
// 请求购物车商品列表
const cartlistArr = ref<Array<Icartlistitem>>([])
const totalprice = ref<number>(0);  //总价
getcartlistdata().then(res => {
    console.log('res', res);
    cartlistArr.value = res.data.data.cartList
    // 判断全选状态
    const { goodsCount, checkedGoodsCount, checkedGoodsAmount } = res.data.data.cartTotal
    if (goodsCount == checkedGoodsCount && goodsCount != 0) {
        // 当前商品的总数量和选中的商品的总数量一致相等
        checkedAll.value = true
    } else {
        checkedAll.value = false
    }

    // 计算商品的总价(选中的商品)
    totalprice.value = checkedGoodsAmount * 100
})


// 全选状态
const checkedAll = ref<boolean>(false)


// 实现全选 和全不选
const checkallFn = () => {
    // 01: 获取当前全选按钮状态
    console.log(checkedAll.value);

    // 获取所有的商品的ids
    let ids = '';
    cartlistArr.value.forEach(item => {
        ids += item.product_id + ','
    })

    //console.log(ids.slice(0, ids.lastIndexOf(',')));
    // 02: 调用接口
    setcheckedproduct({
        isChecked: checkedAll.value ? '1' : '0', // 1或0
        productIds: ids.slice(0, ids.lastIndexOf(','))
    }).then(res => {
        console.log('res', res);
        cartlistArr.value = res.data.data.cartList
        // 判断全选状态
        const { goodsCount, checkedGoodsCount, checkedGoodsAmount } = res.data.data.cartTotal
        if (goodsCount == checkedGoodsCount && goodsCount != 0) {
            // 当前商品的总数量和选中的商品的总数量一致相等
            checkedAll.value = true
        } else {
            checkedAll.value = false
        }

        // 计算商品的总价(选中的商品)
        totalprice.value = checkedGoodsAmount * 100
    })
}

// 单选
const singlecheckedFn = (checked: number, product_id: number) => {
    console.log(checked, product_id);
    // 调用选中/不选中状态接口
    setcheckedproduct({
        isChecked: checked ? '1' : '0', // 1或0
        productIds: String(product_id)
    }).then(res => {
        console.log('res-单选', res);
        cartlistArr.value = res.data.data.cartList
        // 判断全选状态
        const { goodsCount, checkedGoodsCount, checkedGoodsAmount } = res.data.data.cartTotal
        if (goodsCount == checkedGoodsCount && goodsCount != 0) {
            // 当前商品的总数量和选中的商品的总数量一致相等
            checkedAll.value = true
        } else {
            checkedAll.value = false
        }

        // 计算商品的总价(选中的商品)
        totalprice.value = checkedGoodsAmount * 100
    })

}

// 删除商品请求
const delFn = (product_id: string) => {
    //调用删除接口
    delcartapi({
        productIds: product_id
    }).then(res => {
        cartlistArr.value = res.data.data.cartList
        // 判断全选状态
        const { goodsCount, checkedGoodsCount, checkedGoodsAmount } = res.data.data.cartTotal
        if (goodsCount == checkedGoodsCount && goodsCount != 0) {
            // 当前商品的总数量和选中的商品的总数量一致相等
            checkedAll.value = true
        } else {
            checkedAll.value = false
        }

        // 计算商品的总价(选中的商品)
        totalprice.value = checkedGoodsAmount * 100
    })
}



// 定义提交方法
const onSubmit = () => {

}



</script>
<style scoped lang="scss">
::v-deep .van-checkbox {
    display: flex;

    .van-checkbox__label {
        flex: 1;
    }
}

.delete-button {
    height: 100%;
}
</style>